<template>
  <div class="detail">
    <header class="detail_header">
      <van-steps :active="active" active-icon="success" active-color="#F4A001">
        <van-step>买家下单</van-step>
        <van-step>2</van-step>
        <van-step>免单</van-step>
      </van-steps>
      <p>第三步: 仓库发货</p>
    </header>
    <main class="detail_main">
      <div class="main_header">
        <p>仓库正在发货中<span style="display:inline-block">x</span></p>
      </div>
      <div class="main_main">
        <p class="name">晶晶<span class="tel">13487623490</span></p>
        <p class="adress">
          <img src="../../images/detail/1.png" alt="">
          上海市 上海市 奉贤区 海湾镇 上海市奉贤区                                                               
        
        </p>
        <p class="adress_two">
           海湾镇五四公路3389号上海八维宏烨学校
        </p>
      </div>
      <div class="main_footer">
        <span>请注意查收</span>
      </div>
    </main>
    <footer class="detail_footer">
        <div class="footer_header">
             <p class="tj">相似商品推荐</p>
             <dl>
                 <dd><img src="../../images/detail/2.png" alt=""></dd>
                 <dd class="dd2"><img src="../../images/detail/2.png" alt=""></dd>
                 <dd class="dd3"><img src="../../images/detail/2.png" alt=""></dd>
             </dl>
        </div>
        <div class="footer_main">
            <img src="../../images/detail/3.png" alt="">
        </div>
    </footer>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: 1,
    };
  },
};
</script>

<style lang="scss" scoped>
.detail {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  .detail_header {
    width: 100%;
    height: 200px;
    background: #000;
    padding: 50px 50px;
    p {
      color: #efe6ac;
      padding: 40px 70px;
      font-weight: 600;
      font-family: PingFangSC-Semibold, Ping;
    }
  }

  .detail_main {
    flex: 1;
    overflow: auto;
    .main_header {
      width: 100%;
      height: 230px;
     
      p {
        width: 100%;
        height: 50px;
        text-align: center;
        line-height: 50px;
        border-bottom: solid #F4F4F4 3px;
        span {
          font-size: 26px;
          padding-left: 80px;
          color: #9e9e9e;
        }
      }
    }
    .main_main {
      width: 100%;
      height: 120px;
      margin: -182px 0;
      line-height: 40px;
      border-bottom: solid #F4F4F4 3px;
      .name {
        margin-left:57px;
        .tel {
          margin-left: 20px;
          font-size: 12px;
        }
      }
      .adress {
        margin-left: 25px;
        font-size: 12px;
      }
      .adress_two{
        margin-left: 57px;
        font-size: 12px;
      }
    }
    .main_footer {
      width: 100%;
      height: 70px;
      margin: 180px 0;
      span {
        line-height: 70px;
        margin-left: 30px;
      }
    }
  }
  .detail_footer{
      border-top: solid #F4F4F4 7px;
      width: 100%;
      height: 220px;
      .footer_header{
          width: 100%;
          height: 200px;
          .tj{
            height: 60px;
            text-align: center;
            line-height: 60px;
          }
          dl{
               display: flex;
               flex-wrap: wrap; 
                dd{
                    margin: 10px 9px;
                }
            }
      }
      .footer_main{
         width: 100%; 
         height:50px;
         background: white;
         img{
             margin:1% 5%;
         }
      }
  }
}
</style>
